import { observer } from 'mobx-react-lite';
import { useEffect, useState } from 'react';
import { isArray, isEmpty } from 'esy-ui';
import dayjs from 'dayjs';
import { useGlobalStore, useUserInfoStore } from '@/mobx';
import { postAgentRebateTotal } from '@/services';
import { Empty } from '@/components';
import { useFormatText } from '@/hooks';

const tts = [
  {
    tKey: 'text_175',
    vKey: 'InviteCount',
  },
  {
    tKey: 'text_176',
    vKey: 'EffCount',
  },
  {
    tKey: 'text_174',
    pKey: 'RebateTotal',
    vKey: 'BetTotal',
  },
  {
    tKey: 'text_43',
    pKey: 'RebateTotal',
    vKey: 'WinTotal',
  },
  {
    tKey: 'text_177',
    pKey: 'RebateTotal',
    vKey: 'DirectProfit',
  },
];

function MyProfit() {
  const { userInfo } = useUserInfoStore();
  const { changeState } = useGlobalStore();
  const [info, setInfo] = useState([]);
  const { text } = useFormatText();

  useEffect(() => {
    if (userInfo?.Token) {
      changeState('isLoading', true);
      postAgentRebateTotal({})
        .then((res: any) => {
          setInfo(res?.Data);
        })
        .catch(() => {})
        .finally(() => {
          changeState('isLoading', false);
        });
    }
  }, [changeState, userInfo?.Token]);

  console.info(info);

  return (
    <div className='w-full h-tab-1 inline-block align-top overflow-y-auto px-3 text-xs'>
      {isArray(info) && !isEmpty(info) ? (
        info.map((it, i) => (
          <div key={it.Id || i} className='border border-solid border-color-19 rounded my-2.5'>
            <div className='bg-color-20 py-2 px-3 flex items-center'>
              <div className='w-20'>{text('text_42')}</div>
              <div>{it?.DateId ? dayjs(`${it.DateId}`).format('YYYY-MM-DD') : ''}</div>
            </div>
            {tts.map((its) => (
              <div key={its.tKey} className='border-b border-solid border-color-19 py-2 px-3 flex items-center last:border-0'>
                <div className='w-20'>{text(its.tKey)}</div>
                <div>{its.pKey ? it[its.pKey][its.vKey] : it[its.vKey]}</div>
              </div>
            ))}
          </div>
        ))
      ) : (
        <Empty />
      )}
    </div>
  );
}

export default observer(MyProfit);
